<template>
	<view :class="[skuListShow?'un-scroll': '', 'u-p-b-98']">
		<view class="navbar">
			<view class="back" @click="back">
				<u-icon name="arrow-left" color="#ffffff" size="32"></u-icon>
			</view>
		</view>
		<u-swiper :list="swiperList" name="productMediaUrl" border-radius="0" height="600" mode="number"
			indicator-pos="bottomRight" img-mode="scaleToFill">
		</u-swiper>
		<view class="u-flex u-p-l-30 u-p-r-30 u-p-t-10 u-p-b-10 u-row-between u-type-main-bg">
			<view class="u-flex-col u-type-error-light u-font-30">
				<view>
					<text class="u-font-24">¥</text>
					<text class="u-font-36 u-f-w">{{token?details.salePrice:details.productSalePrice}}</text>
				</view>
				<view class="u-font-26" style="text-decoration: line-through;">
					<text class="u-m-r-4">原价</text>
					<text>¥{{details.productSalePrice}}</text>
				</view>
			</view>
			<view class="u-font-28 u-type-error-light">该商品正在进行糖果抵扣活动</view>
		</view>
		<view class="u-p-t-30 u-p-l-30 u-p-b-30">
			<view class="u-p-r-30">
				<view class="u-font-32 u-f-w">{{details.productName}}</view>
				<view class="u-font-26">{{details.productTitle}}</view>
			</view>
			<view class="u-flex u-row-between">
				<view>
					<view class="u-flex u-m-t-30 u-font-24 u-type-info">
						<view class="u-p-r-20">库存：{{details.totalStocks}}</view>
						<view>销量：{{details.soldUnit}} 件</view>
					</view>
					<view class="u-m-t-8 u-font-26">{{details.merShortName}}</view>
					<view class="u-m-t-10 u-font-26 u-flex" v-if="checked&&token">
						<text class="u-m-r-10">价格：¥{{details.salePrice}} + 糖果{{details.saleSweet}}</text>
						<u-icon name="question-circle-fill" :color="$u.color.warningDark" size="32"
							@click="sweetTips()"></u-icon>
					</view>
					<view v-else class="u-m-t-10 u-font-26 u-type-w">价格：¥{{details.productSalePrice}}</view>
				</view>
			</view>
		</view>
		<u-gap height="8" bg-color="#f2f2f2"></u-gap>
		<view v-if="token" class="u-flex u-row-between u-font-28 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
			<view>是否抵扣</view>
			<view>可用{{details.saleSweet}}糖果抵扣{{details.deductPrice}}元</view>
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" active-color="#FF6801"></u-checkbox>
			</u-checkbox-group>
		</view>
		<view v-else class="u-font-28 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">登录后可用糖果抵扣</view>
		<u-gap height="8" bg-color="#f2f2f2"></u-gap>
		<view class="u-flex u-row-between u-font-28 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20" @click="mallParamter()">
			<view>参数</view>
			<view class="u-flex">
				<view class="u-line-1" style="width: 400rpx;">{{paramterData.length>0?paramterData[0].productAttrValue:''}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-if="productSpecDetails.length==1&&productSpecDetails[0].specDetails.length==1">
			<u-gap height="8" bg-color="#f2f2f2"></u-gap>
			<view class="u-flex u-row-between u-font-28 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
				<view class="u-p-r-40">购买数量</view>
				<view>
					<u-number-box :min="1" v-model="buyNums" @change="valChange"></u-number-box>
				</view>
			</view>
			<u-gap height="8" bg-color="#f2f2f2"></u-gap>
			<view class="u-flex u-font-28 u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
				<view class="u-p-r-40" style="width: 240rpx;">已选择</view>
				<view>
					<text v-for="(item,index) in productSpecDetails" :key="index">
						{{item.specName}}:{{item.specDetails[0].specDetailName}}
					</text>
				</view>
			</view>
		</view>
		<u-gap height="8" bg-color="#f2f2f2"></u-gap>
		<view class="u-p-30">
			<view class="u-p-b-28 u-f-w">购买须知</view>
			<view>
				<text>{{details.productDesc}}</text>
			</view>
		</view>

		<u-parse :html="content" :lazy-load="true" :tag-style="{img:'display:flex'}"></u-parse>
		
		<submitBar ref="submitBar" :token="token" :details="details" :sku="productSpecDetails" :productId="product_id" :checked="checked" @changeChecked="changeChecked" @skuListShow="(e) => {skuListShow = e}"/>

		<u-popup v-model="paramShow" mode="bottom" border-radius="14" :closeable="true">
			<view class="u-text-center u-p-30 u-f-w">产品参数</view>
			<scroll-view scroll-y="true" style="max-height: 800rpx;">
				<u-cell-group class="u-p-b-60">
					<u-cell-item :title="item.productAttrName" :value="item.productAttrValue" :arrow="false"
						v-for="(item,index) in paramterData" :key="index"></u-cell-item>
				</u-cell-group>
			</scroll-view>
		</u-popup>
		
		<u-popup v-model="modalShow" mode="center" border-radius="14" :closeable="true">
			<view class="u-text-center u-p-30 u-f-w u-font-32">提示</view>
			<view class="u-p-t">
				<text>包含服务费{{details.serviceFee}}</text>
			</view>
		</u-popup>
		<drag-button @btnClick="dragBtn"></drag-button>
	</view>
</template>

<script>
	import submitBar from '@/components/submitBar/index.vue'
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		data() {
			return {
				token: '',
				product_id: '',
				swiperList: [],
				details: {},
				checked: true,
				paramterData: [],
				productSpecDetails:[],

				buyNums: 1,
				content: '',
				paramShow: false,
				modalShow:false,
				skuListShow: false // sku框显示（控制滚动穿透）
			}
		},
		components: {
			submitBar,
			dragButton,
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			if (this.token) {
				this.getTokenDetail()
			} else {
				this.getDetail();
			}
		},
		onLoad(option) {
			this.product_id = option.id;
			if (option.inviteCode) {
				if (option.inviteCode != uni.getStorageSync('referrerMobile')) {
					uni.setStorageSync('referrerMobile', option.inviteCode || '')
				}
			}
			this.isWeXin = this.$u.utils.isWeiXin();
		},
		methods: {
			dragBtn() {
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			getDetail() {
				this.$u.api.detail({
					product_id: this.product_id
				}).then(res => {
					if (res.code == 0) {
						this.swiperList = res.data.medias
						this.details = res.data.info;
						this.paramterData = res.data.productAttrValues;
						this.content = res.data.detail;
						this.productSpecDetails = res.data.productSpecDetails;
					}
				})
			},
			getTokenDetail() {
				this.$u.api.productDedail({
					product_id: this.product_id
				}).then(res => {
					if (res.code == 0) {
						this.swiperList = res.data.medias
						this.details = res.data.info;
						this.paramterData = res.data.productAttrValues;
						this.content = res.data.detail;
						this.productSpecDetails = res.data.productSpecDetails;
					}
				})
			},
			sweetTips() {
				this.modalShow = true;
			},
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			mallParamter() {
				this.paramShow = true;
			},
			valChange(val){
				this.$refs.submitBar.buyNums = val.value;
			},
			changeChecked(val){
				this.checked = val;
			}
		}
	}
</script>

<style scoped>
	.un-scroll {
		overflow: hidden;
		position: fixed;
	}
	.navbar {
		position: fixed;
		height: 100rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 1000;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 70rpx;
		height: 70rpx;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	.u-p-t {
		padding: 0 30rpx 30rpx 30rpx;
	}
</style>
